<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>grid</title>
        <style>
            .wrapper {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 100px 100px;
                grid-gap: 10px;
            }
            .box {
                background-color: aqua;
                float: left;
                width: 80px;
                height: 80px;
                margin-right: 10px;
            }

            .box1 {
                /* 第一行第二列+第一行第三列 */
                background-color: red;
                grid-column: 2 / 4;
                grid-row: 1;
            }
            .box2 {
                /* 第一行第一列+第二行第一列 */
                background-color: red;
                grid-column: 1;
                grid-row: 1 / 3;
            }
            .box3 {
                /* 第二行第三列 */
                background-color: red;
                grid-column: 3;
                grid-row: 2;
            }
        </style>
    </head>

    <body>
        <!-- <div class="wrapper">
            <div class="box">One</div>
            <div class="box">Two</div>
            <div class="box">Three</div>
            <div class="box">Four</div>
            <div class="box">Five</div>
            <div class="box">Six</div>
        </div> -->

        <!-- <div class="wrapper">
            <div class="box1">One</div>
            <div class="box2">Two</div>
            <div class="box3">Three</div>
        </div> -->
        <h1>Simple float example</h1>
    
        <div class="box">Float</div>
            
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 
            Duis felis orci, pulvinar id metus ut, rutrum luctus orci. 
            Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet.
        </p>
    </body>
</html>

